---
section: Core Concepts
title: TypeScript
slug: /docs/typescript/
---

# TypeScript

Use xstyled with TypeScript.

<carbon-ad />

xstyled is written in TypeScript, all the library is strongly typed. It works out of the box for TypeScript users.

You may have to configure styled-components or Emotion, especially if you use a theme.

## Use TypeScript with Styled Components

### Create a declaration file

```js
// styled.d.ts

// import original module declarations
import 'styled-components'
import '@xstyled/system'
import {
  ITheme,
  DefaultTheme as XStyledDefaultTheme,
} from '@xstyled/styled-components'

interface AppTheme extends ITheme, XStyledDefaultTheme {
  /* Customize your theme */
}

// and extend them!
declare module '@xstyled/system' {
  export interface Theme extends AppTheme {}
}
declare module 'styled-components' {
  export interface DefaultTheme extends AppTheme {}
}
```

Read [styled-components TypeScript guide](https://styled-components.com/docs/api#typescript) to learn more about it.

## Use TypeScript with Emotion

### Create a declaration file

```js
// styled.d.ts

// import original module declarations
import '@xstyled/system'
import '@emotion/react'
import { ITheme, DefaultTheme as XStyledDefaultTheme } from '@xstyled/emotion'

interface AppTheme extends ITheme, XStyledDefaultTheme {
  /* Customize your theme */
}

// and extend them!
declare module '@xstyled/system' {
  export interface Theme extends AppTheme {}
}
declare module '@emotion/react' {
  export interface Theme extends XStyledDefaultTheme {
    /* Customize your theme */
  }
}
```

Read [Emotion TypeScript guide](https://emotion.sh/docs/typescript) to learn more about it.
